<template>
  <div class="install-table">
    <div :class="filterQueryModel ? 'filter-box filter-box-show flex flex-wrap mb-2.5' : 'filter-box filter-box-hide flex flex-wrap mb-2.5'">
      <el-form :model="seachDataObj" label-width="110" inline style="max-width: 1200px">
        <el-form-item label="搜索内容:">
          <el-input
            :style="guardFormLableWidth"
            v-model="tableSearch"
            placeholder="请输入搜索内容..."
            :suffix-icon="Search"
            @keyup.enter="getTableData"
          />
        </el-form-item>
        <el-form-item label="名称:" v-show="filterQueryModel">
          <el-input v-model="seachDataObj.name" :style="guardFormLableWidth" placeholder="请输入搜索内容" />
        </el-form-item>
        <el-form-item label="主机名:" v-show="filterQueryModel">
          <el-input v-model="seachDataObj.hostname" :style="guardFormLableWidth" placeholder="请输入搜索内容" />
        </el-form-item>
        <el-form-item label="IP:" v-show="filterQueryModel">
          <el-input v-model="seachDataObj.ip" :style="guardFormLableWidth" placeholder="请输入搜索内容" />
        </el-form-item>
        <el-form-item label="MAC:" v-show="filterQueryModel">
          <el-input v-model="seachDataObj.mac" :style="guardFormLableWidth" placeholder="请输入搜索内容" />
        </el-form-item>
        <el-form-item label="模糊查询:" v-show="filterQueryModel">
          <el-switch
            v-model="filterSwitch"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <div :class="filterQueryModel ? 'form-submit-show' : 'form-submit-hide'">
          <el-button type="primary" @click="installQueryFilter(filterSwitch)">搜索</el-button>
          <!-- <el-icon><ArrowDown /></el-icon> -->
          <el-button :icon="Filter" @click="openSeachFn" v-show="!filterQueryModel">
            <!-- filterQueryModel = !filterQueryModel -->
            过滤条件
          </el-button>
          <el-button @click="openSeachFn" v-show="filterQueryModel">
            收起<el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="table-header flex justify-between pb-2.5 ">
      <div></div>
      <div class="right">
        <el-button class="ml-2.5" plain @click="downloadList()">
          <el-icon><img src="../../assets/images/exportList.svg" class="mr-2.5" alt=""></el-icon>
          列表导出
        </el-button>
        <el-button icon="RefreshRight" @click="refreshTableAll">刷新</el-button>
        <!-- <div class="inline-block mr-3">
          <el-button class="ml-6" @click="downloadList()"> 列表导出 </el-button>
        </div> -->
        
        <el-button
          class="ml-2.5"
          plain
          @click="modeAllFn"
          :disabled="handleSelectionChangeFlag"
          >
          <el-icon><img src="../../assets/images/mode.svg" class="mr-2.5" alt=""></el-icon>
          模式
        </el-button>
        <el-button
          class="ml-2.5"
          plain
          @click="scanAllFn"
          :disabled="handleSelectionChangeFlag"
          >
          <el-icon><img src="../../assets/images/scan.svg" class="mr-2.5" alt=""></el-icon>
          扫描
        </el-button>
        <el-button
          class="ml-2.5"
          plain
          :icon="Delete"
          @click="deleteFn"
          :disabled="handleSelectionChangeFlag"
          >删除
        </el-button>
        <el-button
          class="ml-2.5"
          plain
          :icon="EditPen"
          @click="handleUpdateClass"
          :disabled="handleSelectionChangeFlag"
        >
          修改部门
        </el-button>
      </div>
    </div>
    
    <div>
      <el-table
        ref="hetTable"
        :data="installTableData"
        style="width: 100%"
        v-loading="loading"
        stripe
        @selection-change="handleSelectionChange"
        :show-overflow-tooltip="true"
      >
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column label="名称" width="220">
          <template #default="scope">
            <el-input
              class="td-edit"
              v-model="scope.row.name"
              :key="scope.$index"
              @focus="tdEditOldNameValue = scope.row.name"
              @blur="editNameFn('name', scope.row)"
              @keyup.enter.native="
                (event) => {
                  event.target.blur();
                }
              "
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="160">
          <template #default="scope">
            <el-input
              class="td-edit"
              v-model="scope.row.spec"
              :key="scope.$index"
              placeholder="限制40个字符"
              :maxlength="40"
              @focus="tdEditOldSpecValue = scope.row.spec"
              @blur="editNameFn('spec', scope.row)"
              @keyup.enter.native="
                (event) => {
                  event.target.blur();
                }
              "
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(colItem, colIndex) in tableFields"
          :width="colItem.width"
          :prop="colItem.name"
          :label="colItem.label"
        >
          <template v-if="colItem.type == 'state'" #default="scope">
            <span
              :class="scope.row[colItem.name]"
              :title="scope.row[colItem.name].includes('off') ? '离线' : '在线'"
            ></span>
          </template>
        </el-table-column>
        <el-table-column label="扫描状态" width="100">
          <template #default="scope">
            <div class="flex items-center">
              {{ scope.row.scanStatus == 0 ? "" : "扫描中" }}
              <span v-if="scope.row.scanStatus != 0" class="scan-icon"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="登记信息" width="88">
          <template #default="scope">
            <span class="download-text" @click="showInfo(scope.row)"> 详情 </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230" style="text-align: center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.mode"
              class="ml-2 text-sm"
              inline-prompt
              style="--el-switch-off-color: #a939a9; --el-switch-on-color: #52c41a"
              active-text="保护模式"
              inactive-text="审计模式"
              :disabled="scope.row.online.includes('off-status')"
              @change="checkMode(scope.row)"
            />
            <span class="inline mx-5">
              <el-text
                :type="scope.row.online.includes('off-status') ? '' : 'primary'"
                @click="startScan(scope.row)"
                :class="scope.row.online.includes('off-status') ? 'not-text' : 'cursor-pointer'"
                :title="scope.row.online.includes('off-status') ? '设备不在线' : ''"
              >
                {{ scope.row.scanStatus == 0 ? "扫描" : "停止" }}
              </el-text>
            </span>
            <el-text
              :type="scope.row.online.includes('off-status') ? '' : 'primary'"
              :class="scope.row.online.includes('off-status') ? 'not-text' : 'cursor-pointer'"
              :title="scope.row.online.includes('off-status') ? '设备不在线' : ''"
              @click="guardAuth(scope.row)"
            >
              授权
            </el-text>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationWrap">
        <el-pagination
          class="justify-center"
          background
          :page-size="pageSize"
          :page-count="maxPage ? maxPage : 1"
          :pager-count="7"
          layout="total,prev, pager, next"
          :total="total"
          @current-change="
            pageCount = $event;
            getTableData();
          "
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      v-if="dialogInfo"
      v-model="dialogInfo"
      title="补全登记信息"
      width="600"
      :center="true"
      :close-on-click-modal="false"
    >
      <el-form ref="infoForm" :model="infoFormModel" class="px-10" label-width="70px">
        <el-tabs v-model="defaultPane">
          <el-tab-pane label="地址信息" name="macPane">
            <template v-for="(mac, ipIndex) in infoFormModel.macs" :key="ipIndex">
              <el-form-item label="IP" :label-width="labelWidth">
                <el-input class="input-width" v-model="mac.ip" autocomplete="off" />
              </el-form-item>
              <el-form-item label="MAC" :label-width="labelWidth">
                <el-input class="input-width" v-model="mac.mac" autocomplete="off" />
              </el-form-item>
            </template>
          </el-tab-pane>
          <el-tab-pane label="处理器" name="cpuPane">
            <template v-for="(cpu, cpuIndex) in infoFormModel.cpu" :key="cpuIndex">
              <el-form-item label="系统" :label-width="labelWidth">
                <el-input
                  class="input-width"
                  v-model="cpu.os"
                  autocomplete="off"
                  disabled="true"
                />
              </el-form-item>
              <el-form-item label="型号" :label-width="labelWidth">
                <el-input class="input-width" v-model="cpu.brief" autocomplete="off" />
              </el-form-item>
              <el-form-item label="内核数" :label-width="labelWidth">
                <el-input class="input-width" v-model="cpu.corenum" autocomplete="off" />
              </el-form-item>
              <el-form-item label="外频" :label-width="labelWidth">
                <el-input
                  class="input-width"
                  v-model="cpu.frequency"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="uuid" :label-width="labelWidth">
                <el-input class="input-width" v-model="cpu.uuid" autocomplete="off" />
              </el-form-item>
              <el-form-item label="备注" :label-width="labelWidth">
                <el-input class="input-width" v-model="cpu.vendor" autocomplete="off" />
              </el-form-item>
            </template>
          </el-tab-pane>
          <el-tab-pane label="磁盘" name="diskPane">
            <template v-for="(disk, diskIndex) in infoFormModel.disk" :key="diskIndex">
              <el-form-item label="型号" :label-width="labelWidth">
                <el-input class="input-width" v-model="disk.brief" autocomplete="off" />
              </el-form-item>
              <el-form-item label="可分配空间" :label-width="labelWidth">
                <el-input class="input-width" v-model="disk.diskge" autocomplete="off" />
              </el-form-item>
              <el-form-item label="磁盘SN码" :label-width="labelWidth">
                <el-input class="input-width" v-model="disk.disksn" autocomplete="off" />
              </el-form-item>
              <el-form-item label="uuid" :label-width="labelWidth">
                <el-input class="input-width" v-model="disk.uuid" autocomplete="off" />
              </el-form-item>
            </template>
          </el-tab-pane>
          <el-tab-pane label="内存" name="menoryPane">
            <template
              v-for="(memory, memoryIndex) in infoFormModel.memory"
              :key="memoryIndex"
            >
              <el-form-item label="名称" :label-width="labelWidth">
                <el-input class="input-width" v-model="memory.name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="大小" :label-width="labelWidth">
                <el-input class="input-width" v-model="memory.size" autocomplete="off" />
              </el-form-item>
              <el-form-item label="备注" :label-width="labelWidth">
                <el-input
                  class="input-width"
                  v-model="memory.vendor"
                  autocomplete="off"
                />
              </el-form-item>
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="queryInfo"> 确认</el-button>
          <el-button @click="dialogInfo = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-if="dialogClass"
      v-model="dialogClass"
      title="修改部门"
      width="600"
      :center="true"
      :close-on-click-modal="false"
    >
      <el-tree
        ref="classTreeRef"
        :load="loadNode"
        :check-on-click-node="false"
        node-key="id"
        :check-strictly="true"
        @check="handleClick"
        lazy
        show-checkbox
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="queryClass"> 确认</el-button>
          <el-button @click="dialogClass = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-if="dialogModeAll"
      v-model="dialogModeAll"
      title="修改终端状态"
      width="600"
      :center="true"
      :close-on-click-modal="false"
    >
      <el-radio-group v-model="allModeValue">
        <el-radio value="1">保护模式</el-radio>
        <el-radio value="0">审计模式</el-radio>
      </el-radio-group>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="modeAllSet()"> 确认</el-button>
          <el-button @click="dialogModeAll = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-if="authInfo"
      v-model="authInfo"
      title="终端授权"
      width="600"
      :center="true"
      :close-on-click-modal="false"
    >
      <el-form ref="authForm" :model="authFormModel" class="px-10" label-width="70px">
        <el-form-item label="产品型号：" :label-width="labelWidth">
          <el-input
            disabled="true"
            class="input-width"
            v-model="authFormModel.guardModel"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="有效天数：" :label-width="labelWidth">
          <el-input
            disabled="true"
            class="input-width"
            v-model="authFormModel.authDay"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="设备SN：" :label-width="labelWidth">
          <el-input
            disabled="true"
            class="input-width"
            v-model="authFormModel.guardSN"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="" :label-width="labelWidth">
          请向我们的售后提供您的设备SN，以获取授权码
        </el-form-item>
        <el-form-item label="激活方式：" :label-width="labelWidth">
          <el-radio-group v-model="authFormModel.authType">
            <el-radio value="0">授权码</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="授权码：" :label-width="labelWidth">
          <el-input
            class="input-width"
            v-model="authFormModel.authCode"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="updateGuardAuth"> 确认</el-button>
          <el-button @click="authInfo = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import HETTable from "~/components/common/HETTable.vue";
import { useRouter } from "vue-router";
import {
  ref,
  reactive,
  toRef,
  toRefs,
  toRaw,
  onMounted,
  h,
  nextTick,
  markRaw,
  computed,
} from "vue";
import {
  Refresh,
  Delete,
  EditPen,
  Plus,
  Search,
  Filter,
  ArrowDown,
  Close,
} from "@element-plus/icons-vue";
import { filterFuncTwo } from "~/utils/common/urlCombine.js";
import {
  getInstallAsyncTree,
  getInstallguardTable,
  getInstallguardCount,
  setBatchDelete,
  setBatchScan,
  setBatchMode,
  setUpdateGuardCategory,
  getResources,
  setMode,
  setStartScan,
  setStopScan,
  setInfo,
  getAuth,
  setAuth,
} from "~/utils/axios/defender.js";
import { ElMessage } from "element-plus";
import { ElMessageBox } from "element-plus";
import { filterFunc } from "~/utils/common/urlCombine.js";
import { useTreeStore } from "~/utils/pinia/tree.js";
import { URI } from "~/utils/axios/axios.js";
import { eventBus } from "~/utils/common/eventBus.js";

const guardFormLableWidth = 'width:248px'

let $router = useRouter();
const treeStore = useTreeStore();
treeStore.openTree();
const successElMessage = () => {
  ElMessage({
    message: "修改成功",
    type: "success",
  });
};

const refreshTableAll = () => {
  // treeStore.treeLinkedTableCategoryId = 1
  getTableData();
};

const filterQueryModel = ref(false);

/***
 *
 * 补全登录信息form表单
 *
 * **/
const defaultPane = "macPane";
// 表格每行描述文字宽度
const labelWidth = "120px";
// 模态框控制器
const dialogInfo = ref(false);
const dialogModeAll = ref(false);
const allModeValue = ref("1");
//  form表单modeel数据
const infoFormModel = ref();
//批量修改模式
const modeAllFn = () => {
  allModeValue.value = "0";
  dialogModeAll.value = true;
};
// 表格查看详情函数
const showInfo = (row) => {
  dialogInfo.value = true;
  row.guardInfo.cpu[0].os = row.os;
  infoFormModel.value = row.guardInfo;
  console.log(infoFormModel.value);
};
// 补全登录信息提交
const queryInfo = () => {
  console.log(infoFormModel.value);
  getResources(infoFormModel.value).then(
    (res) => {
      if (res.data.succeed) {
        successElMessage();
        dialogInfo.value = false;
      }
    },
    (err) => {
      ElMessage.error(err);
    }
  );
};
/**
 *
 * 已安装设备
 *
 */
// 已安装设备table
const hetTable = ref();
// 已安装设备 table 数据
let installTableData = ref([]);
// 表格多选框是否有被选中
let handleSelectionChangeFlag = ref(true);
// 表格名称列原数据
const tdEditOldNameValue = ref("");
const tdEditOldSpecValue = ref("");
// 查询框
const tableSearch = ref("");
// 表格加载状态
const loading = ref(true);
// 是否模糊查询
const filterSwitch = ref(false);

// 已安装设备中 修改名称事件
const editNameFn = (type, row) => {
  if (type === "name" && row.name == tdEditOldNameValue.value) {
    return;
  }
  if (type === "spec" && row.spec == tdEditOldSpecValue.value) {
    return;
  }
  let params = {
    oid: row.oid,
    name: row.name,
    spec: row.spec,
  };
  setInfo(params).then(
    (res) => {
      if (res.data.succeed) {
        successElMessage();
      }
    },
    (err) => {
      ElMessage.error(err);
    }
  );
};
const openSeachFn = () => {
  filterQueryModel.value = !filterQueryModel.value
  if(filterQueryModel){
    seachDataObj.name = '';
    seachDataObj.hostname = '';
    seachDataObj.ip = '';
    seachDataObj.mac = '';
    filterSwitch.value = false;
  }
}
// 已安装设备表格中的名称列
// 在线状态vnode 变量
const tableFields = reactive([
  { name: "hostname", label: "主机名", width: "100px" },
  { name: "online", label: "在线", type: "state", width: "60px" },
  { name: "categoryName", label: "部门", width: "80px" },
  { name: "ostype", label: "操作系统", width: "90px" },
  { name: "ip", label: "IP" },
  { name: "mac", label: "MAC" },
]);

const isNotNumber = (value) => {
  return /^\D+$/.test(value);
};

// 已安装设备的数据请求
const getTableData = async (countParams = {}, searchParams = {}) => {
  if (treeStore.treeLinkedTableCategoryId) {
    console.log(treeStore.treeLinkedTableCategoryId);
    let number = Number(treeStore.treeLinkedTableCategoryId);
    console.log("b : " + number);
    if (!number) {
      return;
    }
  }

  let routeQuery = $router.currentRoute.value.query;
  if (JSON.stringify(routeQuery) != "{}") {
    searchParams.online = routeQuery.param;
    countParams.online = routeQuery.param;
  }

  searchParams.size = 10;
  searchParams.page = pageCount.value;
  searchParams.categoryId = treeStore.treeLinkedTableCategoryId || 1;
  countParams.categoryId = treeStore.treeLinkedTableCategoryId || 1;

  loading.value = true;
  await getInstallguardTable(searchParams).then((res) => {
    console.log(res);
    if (res) {
      installTableData.value = res.data.map((item) => {
        return {
          ...item,
          mode: Boolean(Number(item.mode)),
          online: item.online ? "online on-status" : "online off-status",
        };
      });
    } else {
      installTableData.value = [];
    }
  });

  await getInstallguardCount(countParams).then((res) => {
    if (res) {
      total.value = res.data;
    } else {
      total.value = 0;
    }
  });
  // let installData = await getInstallguardTable(searchParams)
  // let tableCount = await getInstallguardCount(countParams)

  // onlineVNode.vNodeArr = [];
  // installTableData.value = installData.data.map(item => {
  //   return {
  //     ...item,
  //     mode: Boolean(Number(item.mode)),
  //     online: item.online ? 'online on-status' : 'online off-status',
  //   }
  // });
  // total.value = tableCount.data;
  loading.value = false;
  treeStore.treeLinkedTableRef = hetTable;
};

const authInfo = ref(false);
const authFormModel = reactive({
  oid: "",
  guardModel: "",
  authDay: 0,
  guardSN: "",
  authType: 0,
  authCode: "",
});
const authType = ref("");
const authForm = ref();
const guardAuth = async (row) => {
  if(row.online.includes('off-status')){
    return
  }
  getAuth(row.oid).then(
    (res) => {
      if (res.data.succeed) {
        let data = res.data.data;
        authFormModel.guardModel = data.guardModel;
        authFormModel.authDay = data.authDay;
        authFormModel.guardSN = data.guardSN;
        authInfo.value = true;
        authFormModel.oid = row.oid;
        authFormModel.authType = "0";
      }
    },
    (err) => {
      ElMessage.error(err);
    }
  );
};

const updateGuardAuth = () => {
  console.log("authFormModel:" + authFormModel);
  setAuth(authFormModel).then(
    (res) => {
      if (res.data.succeed) {
        successElMessage();
        authInfo.value = false;
      }
    },
    (err) => {
      ElMessage.error(err);
    }
  );
  authFormModel.authCode = "";
  authInfo.value = false;
};

// 表格设备开始扫描
const startScan = async (row) => {
  if(row.online.includes('off-status')){
    return
  }
  let params = {
    scanPath: ["/"],
  };
  if (row.scanStatus == 0) {
    await setStartScan(row.oid, params).then((res) => {
      if (res.data.success) {
        successElMessage();
      }
    });
  } else {
    let stopParam = {
      save: 1,
    };
    await setStopScan(row.oid, stopParam).then((res) => {
      if (res.data.success) {
        successElMessage();
      }
    });
  }
  getTableData();
};
// 表格部署模式
const checkMode = (row) => {
  setMode({
    oid: row.oid,
    type: Number(row.mode),
  }).then(
    (res) => {
      if (res.data.succeed) {
        successElMessage();
      }
    },
    (err) => {
      ElMessage.error(err);
    }
  );
};
// 已安装设备表格中用户选择复选框时的函数
const handleSelectionChange = (val) => {
  updateClassParams.deviceId = val.map((device) => {
    return device.oid;
  });
  if (val.length >= 1) {
    handleSelectionChangeFlag.value = false;
    // treeStore.treeRef.filter(false)
  } else {
    handleSelectionChangeFlag.value = true;
    // treeStore.treeRef.filter(true)
  }
};
// 修改部门
// 弹出框ref
const dialogClass = ref(false);
// 部门树形组件ref
const classTreeRef = ref();
// 已选中的部门
const checkTreeClassData = ref();
// 部门树形组件的原始数据
const treeData = reactive([
  {
    label: "部门",
    id: "1",
    disabled: true,
    children: [],
  },
]);
// 部门树形组件 懒加载数据获取函数
const loadNode = (node, resolve) => {
  if (node.level === 0) {
    return resolve(treeData);
  }
  getInstallAsyncTree(node.data.id).then((res) => {
    let listNode = [];
    res.data.map((treeItem) => {
      if (treeItem.pid == node.data.id) {
        let treeItemDisabled = false;
        if (treeItem.pid == "1") {
          treeItemDisabled = handleSelectionChangeFlag.value;
        } else {
          treeItemDisabled = classTreeRef.value.getNode(treeItem.pid).data.disabled;
        }
        listNode.push({
          label: treeItem.name,
          flag: false,
          disabled: treeItemDisabled,
          ...treeItem,
        });
      }
    });
    if (listNode.length >= 1) {
      resolve(listNode);
    } else {
      resolve([]);
    }
  });
};
// 修改部门需要的传参
let updateClassParams = reactive({
  deviceId: [],
});
const handleClick = (data, tree) => {
  if (tree.checkedKeys.length <= 0) {
    return;
  }
  classTreeRef.value.setCheckedKeys([]); // 删除所有选中节点
  classTreeRef.value.setCheckedNodes([data]); // 选中已选中节点
  checkTreeClassData.value = classTreeRef.value.getCheckedNodes()[0].id;
  // }
};
const handleUpdateClass = () => {
  dialogClass.value = true;
};

const queryClass = () => {
  let tathClassParams = toRaw(updateClassParams);
  tathClassParams.categoryId = [toRaw(checkTreeClassData.value)];
  if (!checkTreeClassData.value) {
    ElMessage.info("请选择部门");
    return;
  }
  setUpdateGuardCategory(tathClassParams).then(
    (res) => {
      if (res.data.succeed) {
        successElMessage();
        hetTable.value.clearSelection();
        checkTreeClassData.value = null;
        classTreeRef.value.setCheckedKeys([]);
        dialogClass.value = false;
        refreshTableAll();
        eventBus.emit("reloadTree");
      }
    },
    (err) => {
      ElMessage.error(err);
    }
  );
};
// 已安装设备表格右上方表格操作按钮参数及函数
const deleteFn = (index, row) => {
  ElMessageBox.confirm("删除后将无法还原，确定要删除？", "删除工业卫士", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",
    type: "warning",
    center: true,
    icon: markRaw(Delete),
  }).then(() => {
    setBatchDelete(updateClassParams.deviceId.join()).then(
      (res) => {
        if (res.data.succeed) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          refreshTableAll();
        }
      },
      (err) => {
        ElMessage.error(err);
      }
    );
  }).catch();
};
const scanAllFn = (index, row) => {
  setBatchScan(updateClassParams.deviceId.join()).then(
    (res) => {
      if (res.data.succeed) {
        ElMessage({
          message: "下发扫描成功",
          type: "success",
        });
        refreshTableAll();
      }
    },
    (err) => {
      ElMessage.error(err);
    }
  );
};

const modeAllSet = (index, row) => {
  let params = {
    oids: updateClassParams.deviceId,
    mode: Number(allModeValue.value),
  };
  dialogModeAll.value = false;
  setBatchMode(params).then(
    (res) => {
      if (res.data.succeed) {
        ElMessage({
          message: "下发模式切换成功",
          type: "success",
        });
        setTimeout(() => {
          refreshTableAll();
        }, 1000);
      }
    },
    (err) => {
      ElMessage.error(err);
    }
  );
};
// 终端备注模板下载
const downloadTemplate = () => {
  return (
    window.location.protocol +
    "//" +
    window.location.host +
    URI +
    "guardManager/comment/template?categoryId=" +
    treeStore.treeLinkedTableCategoryId
  );
};
// 终端管理列表导出
const downloadList = () => {
  let routeQuery = $router.currentRoute.value.query;
  return (window.location.href =
    window.location.protocol +
    "//" +
    window.location.host +
    URI +
    `guardManager/guard/list/export?categoryId=${
      treeStore.treeLinkedTableCategoryId ? treeStore.treeLinkedTableCategoryId : 1
    }&size=${10}&page=${pageCount.value}&online=${routeQuery?.param}`);
};
// 已安装设备 过滤公共的传参
const seachDataObj = reactive({
  name: "",
  hostname: "",
  ip: "",
  mac: "",
});
// const seachDatas = toRefs(seachDataObj);
// const filterConditions = reactive([
//   { label: "名称", model: seachDatas.name },
//   { label: "主机名", model: seachDatas.hostname },
//   { label: "IP", model: seachDatas.ip },
//   { label: "MAC", model: seachDatas.mac },
// ]);

// 已安装设备表格 过滤功能 提交函数
const installQueryFilter = (filterSwitch) => {
  let filterArr = ["name", "hostname", "ip", "mac"];
  let seachObj = toRaw(seachDataObj);
  let filterParams = {
    keys: tableSearch.value,
    categoryId: treeStore.treeLinkedTableCategoryId,
    name: seachObj.name,
    hostname: seachObj.hostname,
    ip: seachObj.ip,
    mac: seachObj.mac,
    like: filterSwitch,
  };
  getTableData(filterParams, {
    $limit: 10,
    $skip: 0,
    ...filterParams,
  });
};
// 分页
let total = ref(0);
let pageSize = ref(10);
// let totalLimit = ref(10000);
let pageCount = ref(1);
const maxPage = computed(() => {
  return Math.ceil(total.value / pageSize.value);
});

onMounted(() => {
  getTableData();
  hetTable.value.getTableData = () => {
    getTableData();
  };
});
</script>

<style lang="scss" scoped>
.table-header{
  background-color: #fff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 16px 16px 10px 16px;
}
.install-class {
  display: inline-block;
  line-height: 42px;
  width: 100%;
  padding-left: 20px;
  background-color: #fff;
  border-bottom: 1px solid #f4f5f9;
}

.el-tree {
  --el-tree-node-content-height: 40px;
}

.tree-box {
  height: 500px;
  background-color: #fff;

  :deep(.el-tree > .el-tree-node > .el-tree-node__children) {
    max-height: 370px;
    overflow-y: auto !important;
  }
}

.tree-input {
  width: 120px;
}

.tree-icon {
  .el-icon {
    margin-left: 5px;
  }

  .el-icon:hover {
    color: $base-color;
  }

  .class-del {
    display: inline-flex;
    border: none;
    padding: 0;
    height: 14px;
    margin-left: 5px;
  }
}

.online {
  display: inline-block;
  height: 12px;
  width: 12px;
  border-radius: 50%;
}

.on-status {
  background: #7bc680;
}

.off-status {
  background: #fcbe2d;
}
.filter-box {
  position: relative;
  margin: 0 0 16px 0;
  padding: 24px 24px 8px 0;
  background-color: #fff;
  border-radius: 6px;
  :deep(.el-form-item){
    margin: 0 !important;
  }
}
.filter-box-show{
  padding: 24px 24px 8px 0;
  :deep(.el-form-item){
    margin-bottom: 16px !important;
  }
}
.filter-box-hide{
  padding: 10px 24px 10px 0;
}
.filter-box .el-input {
  width: 160px;
}

.download-text {
  color: $base-color;
  cursor: pointer;
}

.info-title {
  font-size: 16px;
  font-weight: bold;
}

.input-width {
  width: 320px;
}

:deep(.td-edit .el-input__wrapper) {
  box-shadow: none;
}
.form-submit-show{
  position: absolute;
  right: 24px;
  top: 24px;
}
.form-submit-hide{
  position: absolute;
  right: 24px;
  top: 10px;
}

.scan-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border-radius: 8px; /* 将元素设置为圆形 */
  background-image: linear-gradient(#761196, #ccc);
  animation: spin 1s linear infinite;
}
.scan-icon::after{
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #fff;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>
